<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <script src="../vueJS/VUE.js"></script>
</head>

<body>
    <div id="root">
        <h1>学生信息</h1>
        <button @click="student.age++">年龄加一岁</button>
        
        <button @click="addSex">添加属性，默认是男</button>
        <button @click="firstAdd">在列表首位添加一个朋友</button>
        <button @click="changeFirst">修改第一个朋友名为张三</button>
        <button @click.once="addHobby">添加一个爱好</button>
        <button @click="changeHobby">修改第一个爱好为开车</button>
        <h2>性别:{{student.sex}}</h2>
       
        <h2>姓名{{student.name}}</h2>
        <h2>年龄{{student.age}}</h2>
        <h2>爱好：</h2>
        <ul>
            <li v-for="h,index in student.hobby" :key="index">{{h}}</li>
        </ul>
        <h2>朋友：</h2>
        <ul>
            <li v-for="h,index in student.friend" :key="index">{{h.name}}</li>
        </ul>
    </div> 
    <script type="text/javascript">
    Vue.config.productionTip = false
    new Vue({
        el:'#root',
        data:{
            student:{
                name:'tom',
                age:18,
                hobby:['h1','h2','h3'],
                friend:[
                    {name:'jerry'},
                    {name:'jack'}
                ]
            }
        },
        methods: {
            addSex(){
                Vue.set(this.student,'sex','男')
            },
            firstAdd(){
                this.student.friend.unshift({name:'abc'})
            },
            changeFirst(){
                this.student.friend[0].name='张三'
            },
            addHobby(){
                this.student.hobby.push('吃饭')
            },
            changeHobby(){
                this.student.hobby.splice(0,1,'开车')//0代表第一个，1代表删除一个，后面是替换为什么
            }
        }
    })
    </script>
</body>
</html>